<template>
  <a-form layout="vertical" @finish="handleLogin" :model="loginForm" class="login-form">
    <!-- 账户 -->
    <a-form-item label="账户" name="account" :rules="[{ required: true, message: '请输入账户!' }]">
      <a-input v-model:value="loginForm.account">
        <template #prefix>
          <IdcardOutlined />
        </template>
      </a-input>
    </a-form-item>

    <!-- 密码 -->
    <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
      <a-input-password v-model:value="loginForm.password">
        <template #prefix>
          <LockOutlined />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit" block class="login-btn">
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { IdcardOutlined, LockOutlined } from '@ant-design/icons-vue';

const loginForm = ref({
  account: '',
  password: ''
});

const router = useRouter();

const handleLogin = async () => {
  try {
    const response = await axios.post('http://localhost:5000/api/users/login', loginForm.value);
    localStorage.setItem('token', response.data.token);
    message.success('登录成功');
    router.push('/dashboard');
  } catch (error) {
    message.error(error.response?.data.message || '登录失败');
  }
};
</script>


<style scoped>
.login-form {
  max-width: 400px;
  margin: 0 auto;
}

.login-form-button {
  margin-top: 15px;
}
</style>